import pRightIcon from '@/orderSubPack/images/confirmOrder/right-icon.png';
import { Image, View } from '@tarojs/components';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import baseStyles from '../action-base.module.scss';
import PointSelectLayout from './PointSelectLayout';

const PointState = ({ point, selectedPoint }) => {
  if (selectedPoint?.choosePoint) {
    return (
      <>
        <View className="tip customePageStyle">-¥{selectedPoint.choosePrice}</View>
        <Image src={pRightIcon} className="icon" />
      </>
    );
  }

  if (point?.exceptionCode) {
    return (
      <>
        <View className="tip disabled">
          {point?.exceptionCode === '210' ? '今日使用已达上限' : ''}
          {point?.exceptionCode === '211' ? '本订单不支持' : ''}
          {point?.exceptionCode === '212'
            ? `共${point?.sumPoint}积分，满${point.offsetPointMin}可用`
            : ''}
          {point?.exceptionCode === undefined ? '暂无可用' : ''}
        </View>

        <Image src={pRightIcon} className="icon" />
      </>
    );
  }

  if (!point?.choosePointList?.length) {
    return (
      <>
        <View className="tip disabled">暂无可用</View>
        <Image src={pRightIcon} className="icon" />
      </>
    );
  }

  return (
    <>
      <View className="tip">去选择</View>
      <Image src={pRightIcon} className="icon" />
    </>
  );
};

const PointView = ({ point, selectedPoint, setSelectedPoint }) => {
  const [isOpened, setIsOpened] = useState(false);

  return (
    <>
      <PointSelectLayout
        choosePointList={point?.choosePointList}
        isOpened={isOpened}
        point={point}
        value={selectedPoint}
        onChange={setSelectedPoint}
        onClose={() => {
          setIsOpened(false);
        }}
      ></PointSelectLayout>

      <View
        className={baseStyles.ActionBase}
        onClick={() => {
          if (point?.choosePointList?.length) {
            setIsOpened(true);
          }
        }}
      >
        <View className="label">积分：</View>
        <View className="action">
          <PointState {...{ point, selectedPoint }} />
        </View>
      </View>
    </>
  );
};

export default connect(({ loading, order }) => ({
  loading,

  point: order.point,
}))(PointView);
